<template>
  <div class='p35'>
    <!--    标题-->
    <div class='title'>
      <div>食用农产品承诺达标合格证信息详情追溯</div>
    </div>
    <!--    轮播图-->
    <el-carousel height="150px" v-if='photoWall'>
      <el-carousel-item v-for="(item,index) in photoWall" :key="index">
        <img style='width: 100%' :src='item' alt=''>
      </el-carousel-item>
    </el-carousel>
    <el-carousel height="150px" v-else>
      <el-carousel-item v-for="(item,index) in defaultpPhotoWall" :key="index">
        <img style='width: 100%' :src='item' alt=''>
      </el-carousel-item>
    </el-carousel>

    <!--    详细信息-->
    <div v-if='data' class='info'>
      <div class='info_title' v-text='data.productName'></div>
      <div class='info_list'>产品重量: &nbsp;&nbsp;{{data.productWeight}}公斤</div>
      <div class='info_list'>生产主体: &nbsp;&nbsp;{{data.userPerfect.companyName}}</div>
      <div class='info_list'>生产类型: &nbsp;&nbsp;{{data.userPerfect.produceType}}</div>
      <div class='info_list'>企业地址: &nbsp;&nbsp;{{address}}</div>
      <div class='info_list'>生产地址: &nbsp;&nbsp;{{data.produceAddress}}</div>
      <div class='info_list'>联系方式: &nbsp;&nbsp;{{data.userPerfect.phoneNumber}}</div>
      <div class='info_list'>打印日期: &nbsp;&nbsp;{{data.createTime}}</div>
      <div class='info_title2'>合格证明</div>
      <div class='info_list'>合格方式: &nbsp;&nbsp;{{data.testType}}</div>
    </div>
    <!--    按钮部分-->
    <div class='info_button'>
      <div class='button1'>
        <el-button @click='seeEnterprise' type="primary" size='large' block style='background-color:#138e4a;width: 100%'>查看企业信息</el-button>
      </div>
      <div class='button2'>
        <el-button @click='seeReport' type="primary" size='large' block style='background-color:#138e4a;width: 100%'>查看检测报告</el-button>
      </div>
    </div>


    <!--多图片点击预览-->
    <el-dialog :visible.sync="showViewer" title="预览" fullscreen append-to-body>
      <div v-if="defaultImg===null">
        <img v-for="item in imgSrcList" :src="item" v-if="!pdfFlag" style="display: block; width: 100%;height: 80%; margin: 0 auto"/>
        <pdf-viewer :content="item" v-for="item in imgSrcList" v-if='pdfFlag'></pdf-viewer>
      </div>
      <img :src="defaultImg" style="display: block; width: 100%;height: 80%; margin: 0 auto" v-if="defaultImg"/>
    </el-dialog>
  </div>
</template>

<script>
import { getCertificateByCode } from "@/api/certificate/certificate";
import PdfViewer from '@/components/PdfViewer'
export default {
  name: "CertificateInfo",
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfFlag:false,
      data: null,//一条合格证信息
      photoWall: null,//照片墙
      code:'',
      baseUrl:  process.env.VUE_APP_BASE_API + '/api/common/static/',
      // baseUrl: process.env.VUE_APP_BASE_API,
      imgSrcList:[],
      produceTypeList:[],
      defaultpPhotoWall:[
        require('../../../assets/images/photo_wall.jpg'),
        require("../../../assets/images/photo_wall.jpg"),
        require('../../../assets/images/photo_wall.jpg')
      ],
      produceTypeName:'',
      address:'',
      showViewer:false,
      businessLicenseUrlFlag:false,
      defaultImg:null
    }
  },
  methods: {
    //查看企业信息
    seeEnterprise(){
      if (this.data.userPerfect.businessLicenseUrl){
        this.imgClickView(this.data.userPerfect.businessLicenseUrl)
      } else {
        //this.$message.info("该用户未上传营业执照");
        this.defaultImg=import('../../../assets/images/businessLicense.jpg')
        this.showViewer = true
      }
    },
    imgClickView(text){
      // 将图片路径处理一下
      this.defaultImg=null;
      this.imgSrcList=[]
      let srcArray = text.split(",")
      let srcAllArray= []
      srcArray.forEach((temp)=>{
        if (temp.indexOf(".pdf") !== -1) {
          console.log("pdf")
          this.pdfFlag=true;
        }else {
          this.pdfFlag=false;
        }
        srcAllArray.push(this.getImgView(temp))
      })
      this.imgSrcList = srcAllArray
      this.showViewer = !this.showViewer
    },
    /* 图片预览 */
    getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return text;
    },
    //查看检测报告
    seeReport(){
      if (this.data.testReport){
        console.log("检测报告",this.data.testReport)
        this.imgClickView(this.data.testReport)
      } else {
        //this.$message.info("该用户未上传检测报告");
        this.defaultImg=require('../../../assets/images/report.jpg')
        this.showViewer = true
      }
    },
    async initData() {
      try {
        let{data} = await getCertificateByCode( this.code )
        this.data=data
        console.log("data",this.data)
        this.address=`${data.userPerfect.province}${data.userPerfect.city}${data.userPerfect.area}${data.userPerfect.country}${data.userPerfect.detailAddress}`
        if (this.data.photoWall) {
          this.photoWall = this.data.photoWall.split(',')
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleClose(){
      this.showViewer = false
    }
  },
  created() {
    let code = this.$route.query.code;
    console.log("code",code)
    if (code) {
      this.code = code;
    } else {
      this.$message.error("合格证编号为空");
    }
    this.initData()

  }
}
</script>

<style>

.p35{
  padding: 3.5vw;
}

/*标题*/
.title {
  text-align: center;
  color:  #138e4a;
  font-size: 4vw;
  margin: 3.5vw auto;
}

/*详细信息*/
.info{
  font-weight:700;
  margin-top: 2vw;
  .info_title{
    font-size: 3vw;


    color: #138e4a;
  }
  .info_list{
    margin-top: 2vw;
    font-size:2.5vw;
    //font-weight:700;
    color: #000000;
  }
  .info_title2{
    margin-top: 2vw;
    padding-top: 2vw;
    font-size: 3vw;
    color:#138e4a;
    border-top: 0.5vw solid #138e4a;
  }
}

/*按钮部分*/
.info_button{
  margin-top: 3vw;
  padding: 0 5vw;
}
.button1,.button2{
  width: 100%;
  padding-bottom: 2vw;
}
</style>
